<template>
  <div style="margin: 30px;">
    <el-row class="spanstyle" :gutter="60">
      <el-col class='cardstyle' v-for="(item,index) in cardlist" :key="index" :span="span">
        <el-tooltip effect='light'>
          <div slot="content" class="tip">{{item.name}}<br />{{item.num}}</div>
          <el-card>
            <div class="box-card">
              <div class="iconstyle">
                <i :class="item.icon" style="font-size: 5rem;" :style="{color:item.color}"></i>
              </div>
              <div class="cardtitle">
                <div class="titlename">{{item.name}}</div>
                <div class="titlenum">{{item.num}}</div>
              </div>
            </div>
          </el-card>
        </el-tooltip>
      </el-col>
    </el-row>
    <el-card class="main_charts">
      <div id="main_charts" :key='charttest'>
      </div>
    </el-card>
  </div>
</template>
<!-- <script src="@/charts/main_charts.js"></script> -->
<script>
  import charttest from '@/charts/main_charts.js'
  export default {
    name: 'Index',
    data() {
      return {
        span: 6,
        option: {},
        cardlist: [{
            name: '试卷总数',
            icon: 'el-icon-receiving',
            color: '#754cee',
            num: '0'
          },
          {
            name: '题目总数',
            icon: 'el-icon-document',
            color: '#6bd6ee',
            num: '0'
          },
          {
            name: '用户总数',
            icon: 'el-icon-user',
            color: '#eebc76',
            num: '0'
          },
          {
            name: '答题总数',
            icon: 'el-icon-document-checked',
            color: '#ee86e1',
            num: '0'
          }
        ]
      }
    },
    methods: {
      getindexdata() {
        this.$postRequest({
          url: '/admin/dataShowUp'
        }).then(res => {
          let info = res.data
          if (res.code == 200) {
            let totalNum = info[0].totalNum //用户数量
            let testPaperNum = info[1].testPaperNum //试卷数量
            let questionNum = info[2].questionNum //题目数量
            let scoreNum = info[3].scoreNum //答题人数
            this.cardlist[0].num = testPaperNum
            this.cardlist[1].num = questionNum
            this.cardlist[2].num = totalNum
            this.cardlist[3].num = scoreNum
          }
        })
      },
      getbardata(){
        let colleges = []
        let stunum = []
        this.$postRequest({
          url: '/admin/dataShowDown',
        }).then(res => {
          if (res.code == 200) {
            colleges = res.data.map(item => item.instituteName);
            stunum = res.data.map(item => item.instituteStudentNums);
            charttest.xAxis.data = colleges;
            charttest.series[0].data = stunum;
          }
        })
      },
      test() {
        this.option = charttest
        let myChart = this.$echarts.init(document.getElementById("main_charts"));
        myChart.setOption(this.option);
      }
    },
    mounted() {
      this.test();
      this.getindexdata();
      this.getbardata()
    },
    watch: {
      //观察option的变化
      option: {
        handler(newVal, oldVal) {
          if (this.myChart) {
            if (newVal) {
              this.myChart.setOption(newVal);
            } else {
              this.myChart.setOption(oldVal);
            }
          } else {
            this.test();
          }
        },
        deep: true //对象内部属性的监听，关键。
      },
    }
  }
</script>
<style scoped>
  .spanstyle {
    height: 9.375rem;
  }

  .cardstyle,
  .box-card {
    max-height: 10vh;
  }

  .box-card {
    display: flex;
  }

  .iconstyle {
    width: 40%;
    /* height: 100%; */
    /* padding-top: 0.2rem; */
  }

  .main_charts {
    min-height: 65vh;
    /* max-height: 700vh; */
  }

  #main_charts {
    width: 100%;
    min-height: 62vh;
  }

  @media screen and (max-height:800px) {
    .main_charts {
      min-height: 58vh;
    }

    #main_charts {
      min-height: 53vh;
    }

  }

  @media screen and (max-width:1024px) {
    .cardtitle {
      display: none;
    }

    .main_charts {
      min-height: 57vh;
    }
  }

  .cardtitle {
    /* background-color: #000000; */
    margin-left: auto;
    /* width: 150px; */

  }

  .titlename {
    font-size: 1.125rem;
    font-weight: bold;
    color: #8c8c8c;
    text-align: center;
  }

  .titlenum {
    position: relative;
    width: 100px;
    font-size: 1.125rem;
    font-weight: bold;
    color: #818283;
    text-align: center;
    top: 30px;
  }
</style>
